<template>
  <div class="container">
    <!--      页面头部-->
    <div class="hearder">
      <i-card full="true" :title="theme_title">
        <view slot="content" style="font-size: 50rpx; margin-left: 30rpx">{{theme.name}}</view>
        <view slot="footer" style="display: flex; flex-direction: row">
          <div style="margin:30rpx;">
            <i-icon type="activity_fill" size="18" color="#80848f"/>{{theme.createAtFormat}}  共有{{theme.count}}句
          </div>
          <div style="margin-top: auto; margin-bottom: auto; margin-left: auto">
            <i-rate count="1" @change="collect_theme(theme)" :value="theme.collection" size="35" style="margin: 20rpx"></i-rate>
          </div>
        </view>
      </i-card>

      <i-tabs :current="current" color="#19be6b" @change="handleChange">
        <i-tab key="tab1" title="时间"></i-tab>
        <i-tab key="tab2" title="字母"></i-tab>
      </i-tabs>
    </div>
    <!--      按时间排序-->
    <div v-if="current === 'tab1'">
      <i-cell-group>
        <div v-for="(item, index) in sentenceArrTime" @tap="toEvaluation(item.id)" :key="index">
          <i-cell>
            <p style="font-size: 15pt; color: #000000">{{item.content}}</p>
            <div style="margin: 20rpx">
              <i-row style="font-size: 11pt; color: #888888;">
                <i-col span="18">
                  <div style="margin-top: 18rpx">
                    <i-icon  style="margin-top: 12rpx" type="activity" size="18" color="#80848f"/>{{item.updateAtFormat}}
                  </div>
                </i-col>
                <i-col span="6">
                  <i-rate style="margin-left: 100rpx" count="1" @change="collect(item, item.id)" :value="item.collection" @click.stop size="30"></i-rate>
                </i-col>
              </i-row>
            </div>
          </i-cell>


        </div>
      </i-cell-group>
    </div>
    <div v-else>
      <!--        按首字母排序-->
      <i-cell-group>
        <div v-for="(item, index) in sentenceArrAcronym" @tap="toEvaluation(item.id)" :key="index">
          <i-cell>
            <p style="font-size: 15pt; color: #000000">{{item.content}}</p>
            <div style="margin: 20rpx">
              <i-row style="font-size: 11pt; color: #888888;">
                <i-col span="18">
                  <div style="margin-top: 18rpx">
                    <i-icon  style="margin-top: 12rpx" type="activity" size="18" color="#80848f"/>{{item.updateAtFormat}}
                  </div>
                </i-col>
                <i-col span="6">
                  <i-rate style="margin-left: 100rpx" count="1" @change="collect(item, item.id)" :value="item.collection" @click.stop size="30"></i-rate>
                </i-col>
              </i-row>
            </div>
          </i-cell>
        </div>
      </i-cell-group>
    </div>
    <mp-toast :type="toastType" v-model="showToast" :content="content" :duration="duration"></mp-toast>
  </div>
</template>


<script>
  import {mapState} from 'vuex'
  import mpToast from 'mpvue-weui/src/toast'
  import mpActionsheet from 'mpvue-weui/src/actionsheet'
  import mpButton from 'mpvue-weui/src/button'
  import mpSearchbar from 'mpvue-weui/src/searchbar'
  export default {
    data () {
      return {
        index: 0, // 标识数组下标用于页面间跳转参数传递
        theme: [], // 存放主题信息
        URL: this.GLOBAL.apiUrl, // 存放服务器地址
        iscollect: 0, // 用于标识某句子和主题是否被收藏
        sentenceArrAcronym: [], // 存放按首字母排序的句子列表
        sentenceArrTime: [], // 存放按时间排序的句子列表
        current: 'tab1', // 标识选项卡
        showToast: false, // 标识是否弹出提示框
        toastType: 'default', // 标识弹出提示框类型
        content: '', // 存放提示框文本内容
        duration: 1500 // 提示框存留时间
      }
    },
    computed: {
      ...mapState([
        'userId',
        'themeArr'
      ])
    },
    beforeMount () {
      // 挂载前获取主题信息和句子列表
      let _that = this
      wx.request({
        url: _that.URL + 'sentence/getSentenceByTopicId',
        method: 'POST',
        data: {
          userId: _that.userId,
          topicId: _that.$mp.query.topicId
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success (res) {
          let sentenceArrAcronym = res.data.data.allSentencesSortByAcronym
          let sentenceArrTime = res.data.data.allSentencesSortByTime
          let theme = res.data.data.topic
          _that.theme = theme
          _that.sentenceArrAcronym = sentenceArrAcronym
          _that.sentenceArrTime = sentenceArrTime
          _that.$store.dispatch('getSentenceArrAcronym', sentenceArrAcronym)
          _that.$store.dispatch('getSentenceArrTime', sentenceArrTime)
        }
      })
    },
    components: {
      mpToast,
      mpActionsheet,
      mpButton,
      mpSearchbar
    },
    methods: {
      toEvaluation (sid) {
        // 跳转到评测页
        wx.navigateTo({
          url: '/pages/evaluation/main?sid=' + sid
        })
      },
      isCollect (temp, sid) {
        // 判断句子是否被收藏
        // 若已被收藏，点击取消收藏并发送信号到服务器
        // 若未被收藏，点击收藏成功并发送信号到服务器
        let _that = this
        if (temp === 1) {
          wx.request({
            url: _that.URL + 'collection/addCollection',
            method: 'POST',
            data: {
              userId: _that.userId,
              sentenceId: sid,
              topicId: 0
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            }
          })
        } else if (temp === 0) {
          wx.request({
            url: _that.URL + 'collection/removeCollection',
            method: 'POST',
            data: {
              userId: _that.userId,
              sentenceId: sid,
              topicId: 0
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            }
          })
        }
      },
      isCollectTheme (temp) {
        // 判断句子是否被收藏
        // 若已被收藏，点击取消收藏并发送信号到服务器
        // 若未被收藏，点击收藏成功并发送信号到服务器
        let _that = this
        if (temp === 1) {
          wx.request({
            url: _that.URL + 'collection/addCollection',
            method: 'POST',
            data: {
              userId: _that.userId,
              sentenceId: '0',
              topicId: _that.theme.id
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            }
          })
        } else if (temp === 0) {
          wx.request({
            url: _that.URL + 'collection/removeCollection',
            method: 'POST',
            data: {
              userId: _that.userId,
              sentenceId: '0',
              topicId: _that.theme.id
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            }
          })
        }
      },
      collect (e, sid) {
        // 点击收藏图标时弹出提示框
        if (!e.collection) {
          e.collection = 1
          this.isCollect(e.collection, sid)
          this.toastFun('success', '收藏成功', 1500)
        } else {
          e.collection = 0
          this.isCollect(e.collection, sid)
          this.toastFun('success', '取消收藏', 1500)
        }
      },
      collect_theme (t) {
        // 点击收藏图标时弹出提示框
        if (!t.collection) {
          t.collection = 1
          this.isCollectTheme(t.collection)
          this.toastFun('success', '收藏成功', 1500)
        } else {
          t.collection = 0
          this.isCollectTheme(t.collection)
          this.toastFun('success', '取消收藏', 1500)
        }
      },
      toastFun (type, content, duration) {
        // 弹出提示框
        this.showToast = true
        this.toastType = type
        this.content = content
        this.duration = duration
      },
      handleChange (detail) {
        this.current = detail.target.key
      }
    }
  }
</script>

<style scoped>
  .star {
    float: right;
    /*font-size: larger;*/
  }
  .text_item {
    float: left;
    margin: auto;
  }
  .hearder {
    background-color: #b3d4fc;
    shadow: true;
  }
</style>
